<template>
    <!-- 咨询单 -->
    <Hidden_top />
    <Tags />
    <div class="purorder">
        <div class="w">
            <div class="advisory">
                <div class="advisory_hid">
                    <div></div>
                    <div class="advisory_hid_r">个人身份、公司身份，公司身份时带入公司信息，表格展示</div>
                </div>
                <h2 style="text-align: center; margin-bottom: 30px;">咨询单</h2>
                <div class="requirements">
                    <div class="goods"><span class="goodSize">我咨询的商品</span></div>
                    <p>商品名称：<span>供应重庆中捷立式加工中心导轨防护罩护板</span></p>
                    <table border="1" style="border-collapse: collapse; margin-top: 10px;">
                        <tr style="font-size: 12px;">
                            <td class="table_tb">商品特性&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;防护</td>
                            <td class="table_tb">型号&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;50</td>
                            <td class="table_tb">发货期限&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;3天内</td>
                        </tr>
                        <tr style="font-size: 12px;">
                            <td class="table_tb">样式&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;护板</td>
                            <td class="table_tb">护罩总宽度&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;500</td>
                            <td class="table_tb">供货总量&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;1000件</td>
                        </tr>
                        <tr style="font-size: 12px;">
                            <td class="table_tb">防护部位&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;导轨</td>
                            <td class="table_tb">品牌&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;鑫姆迪克</td>
                            <td class="table_tb">发货地址&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;山东 庆云县</td>
                        </tr>

                    </table>
                    <div class="advisory_img">
                        <div>商品图片：</div>
                        <div>
                            <el-image style="width: 100px; height: 100px"
                                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover"
                                :preview-src-list="srcList" />
                            <p style="font-size: 12px; color: #ABB3C3; margin-top: 5px;">点击产品缩略图，放大产品图片</p>
                        </div>
                    </div>

                </div>
                <div class="rephoto">
                    <div class="goods"><span class="goodSize">商家联系方式</span></div>
                    <div class="individual">
                        <div class="individual_left">
                            <div class="individual_name">
                                <img width="42px" height="42px" src="@/assets/img/header/dh.png" alt="">
                                <div class="individual_xx">
                                    <div>王女士<span style="font-size: 12px; margin-left: 5px; color: #ACACAC;">经理</span>
                                    </div>
                                    <div><span style="font-size: 22px; color: #2270D7;">158 5557 3332</span> <span
                                            style="margin-left: 20px; font-size: 22px; color: #2270D7;">4000-4977960</span>
                                    </div>
                                </div>
                            </div>
                            <div class="individual_wx">添加微信</div>
                        </div>
                        <div class="individual_right">
                            <el-image style="width: 100%; height: 100%" src="" :fit="cover" />
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-top: 1px solid #2270D7;">
                <div style="padding: 0 20px; background-color: #fff;">
                    <div class="myphoto">
                        <div class="goods"><span class="goodSize">我的联系方式</span></div>
                        <el-form :model="form" label-width="120px">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="姓名">
                                        <el-input v-model="form.name" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="联系电话">
                                        <el-input v-model="form.photo" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item label="">
                                <el-input style="width: 700px; height: 60px;" v-model="form.desc" placeholder="请填写备注"
                                    type="textarea" />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="inquiry" @click="consultancy">
                        立即咨询
                        <!-- <el-button  color="" type="primary" ></el-button> -->
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import Hidden_top from '@/components/hidden_top/index.vue';
import Tags from '@/components/tags/index.vue';
import { ref } from 'vue';
const srcList = [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const form = ref({
    name: '',
    photo: '',
    desc: ''
})

const consultancy = () => {

}
</script>

<style lang="scss" scoped>
.purorder {
    height: 53.75vw;
    background-color: #F6F6F6;
}

.w {
    width: 75vw;
    margin: 0 auto;
}

.advisory {
    padding: 0 20px;
    height: 39.75vw;
    background-color: #fff;
    border-bottom: 1px solid #ACACAC;

    .advisory_hid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;

        .advisory_hid_r {
            font-size: 14px;
            color: #304156;

        }
    }

    .requirements {
        .goods {
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 3px solid #2270D7;

            .goodSize {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
            }
        }

        .table_tb {
            width: 138px;
            height: 30px;
            text-align: right;
            background-color: #F8F8F8;
            color: #ACACAC;
        }

        .advisory_img {
            display: flex;
            margin-top: 20px;
        }

    }

    .rephoto {
        margin-top: 30px;

        .goods {
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 3px solid #2270D7;

            .goodSize {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
            }
        }

        .table_tb {
            width: 138px;
            height: 30px;
            text-align: right;
            background-color: #F8F8F8;
            color: #ACACAC;
        }

        .individual {
            display: flex;
            justify-content: space-between;
            width: 810px;
            height: 83px;
            background-color: #F6F6F6;
            margin-top: 20px;
            margin-bottom: 30px;

            .individual_left {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 727px;
                padding-left: 20px;

                .individual_name {
                    display: flex;
                    align-items: center;
                    padding-left: 20px;

                    .individual_xx {
                        margin-left: 10px;
                    }
                }

                .individual_wx {
                    width: 14px;
                    height: 75px;
                    padding-right: 8px;
                    font-size: 14px;
                }
            }

            .individual_right {
                width: 77px;
                height: 77px;
                background-color: #D90424;
                padding: 3px;
            }
        }
    }

}

.myphoto {
    padding: 30px 20px 0;

    .goods {
        margin-bottom: 20px;
        padding-left: 10px;
        border-left: 3px solid #2270D7;

        .goodSize {
            font-size: 16px;
            font-weight: 700;
            color: #333333;
        }
    }
}

.inquiry {
    width: 90px;
    height: 36px;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #2270D7;
    border-radius: 5px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #fff;

}
</style>